<template>
	<view class="box">
		<u-tabs 
			:list="list" 
			:is-scroll="false" 
			:current="current" 
		    @change="change" 
			active-color='rgb(73, 156, 67)'>
		</u-tabs>
		<view class="huxing">
			<image :src="list[current].url" class="bg" mode="widthFix"></image>
			
			<image :src="item.name" class="imgs" mode="widthFix"
			 v-for="(item,index) in list[current].imgs"
			 :key='index'
			></image>
			<!-- <view class="width carousel">
				<carousel :res="list[current].imgs" class="bgshare" height='400' />
			</view> -->
		</view>
	</view>
</template>

<script>
import storage from "@/utils/storage.js";
import { info } from "@/api/login";
import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; //导航栏模块
export default {
	data() {
		return {
			list: [{
				name: '户型D',
				url:'https://www.haopengsong.xyz//static/type/d.jpg',
				imgs:[
					{ name:'https://www.haopengsong.xyz/static/type/d1.png'},
					{ name:'https://www.haopengsong.xyz/static/type/d2.png'}
				]
			},
			{
				name: '户型F1',
				url:require('@/static/type/f1bg.png'),
				imgs:[
					{ name:require('@/static/type/f1_1.png')},
					{ name:require('@/static/type/f1_2.png')},
				]
			}, {
				name: '户型F2',
				url:require('@/static/type/f2bg.png'),
				imgs:[
					{ name:require('@/static/type/f2_1.png')},
					{ name:require('@/static/type/f2_2.png')},
					{ name:require('@/static/type/f2_3.png')},
					{ name:require('@/static/type/f2_4.png')},
				]
			},{
				name: '户型G',
				url:require('@/static/type/gbg.png'),
				imgs:[
					{ name:require('@/static/type/g1.png')},
					{ name:require('@/static/type/g2.png')},
				]
			}],
			current: 0
		};
	},
	components: {
		carousel: tpl_banner
	},
	/**
	 * 页面加载
	 */
	onLoad() {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	methods: {
		change(index) {
			this.current = index;
		}
	}
};
</script>

<style scoped lang="scss">
	.cpimg{
		width:100%;
	}
	.bg{
		width: 100%;
		height: auto;
		display: block;
	}
	.box{
		position: absolute;
		width: 100%;
		height: auto;
		min-height: 100%;
		background-color: #fff;
		padding-bottom: 20px;
	}
	.carousel{
		margin-top: 15px;
	}
	.imgs{
		margin-top:5px;
		width:95%;
		margin: 5px auto 0;
		display: block;
	}
</style>